<template>
	<view class="work-container">
		<view class="card">
			<view class="active-item">
				<view class="number">{{subUser.oneLevelNum}}</view>
				<view class="cardtitle">{{$t('home.team.oneLevel')}}</view>
			</view>
			<view class="active-item">
				<view class="number">{{subUser.secondLevelNum}}</view>
				<view class="cardtitle">{{$t('home.team.twoLevel')}}</view>
			</view>
			<view class="active-item">
				<view class="number">{{subUser.threeLevelNum}}</view>
				<view class="cardtitle">{{$t('home.team.thirdLevel')}}</view>
			</view>
		</view>

		<u-sticky bgColor="#13161F">
			<u-tabs lineWidth="80" :current="currentSwiper" :list="typeList" @click="tabChange"
				itemStyle="width: 50%; height: 40px; " lineColor="#F6DDA4"
				inactiveStyle="font-size: 15px;color: #9c9c9c;font-weight: 500; "
				activeStyle="font-size: 15px;color: white;font-weight: 500;">
			</u-tabs>
		</u-sticky>

		<swiper :current="currentSwiper" class="scroll-view-height" :style="{ 'height': swiperHeight }"
			@change="swipeIndex">
			<swiper-item class="scroll-view-height" :style="{ 'height': swiperHeight }" scroll-y="true">
				<!-- 第一页的内容 -->
				<view class="goods-item" v-for="item in terminalList">
					<view class="goods-name">{{item.terminalName}}</view>
					<view class="info">
						<image :src="item.imgUrl" class="cu-avatar xl " style="width: 200rpx; " mode="widthFix">
						</image>
						<view class="right">
							<view class="info-item">
								<view class="info-item-title">{{$t('shop.netIncome')}}：</view>
								<view class="info-item-number">{{item.amount}}</view>
							</view>
							<view class="info-item">
								<view class="info-item-title">{{$t('shop.computingPower')}}：</view>
								<view class="info-item-number color-b">{{item.power}}TH/s</view>
							</view>
							<view class="info-item">
								<view class="info-item-title">{{$t('shop.totalRevenue')}}：</view>
								<view class="info-item-number">{{item.totalAmount}}</view>
							</view>
							<view class="info-item">
								<view class="info-item-title">{{$t('shop.purchaseLimit')}}：</view>
								<view class="info-item-number color-b">{{item.allowNum}}</view>
							</view>
							<view class="info-item">
								<view class="info-item-title">{{$t('shop.validityPeriod')}}：</view>
								<view class="info-item-number color-b">{{item.leaseDay}}{{$t('shop.day')}}</view>
							</view>
						</view>
					</view>
					<view class="op">
						<view class="price">{{item.leasePrice}}$</view>
						<button v-if="item.status == '1'" class="mini-btn buy-btn" type="primary" size="mini"
							@click="buy(item)">{{$t('shop.buy')}}</button>
						<button v-else class="mini-btn presale-btn" type="primary"
							size="mini">{{$t('shop.presale')}}</button>
					</view>
					<view class="sellingDown">
						<view class="action-box-right" v-show="item.countdownHour != null">
							<view class="action-box-right-start">
								<view>{{$t('shop.countdown')}}:</view>
							</view>
							<view class="uni-countdown">
								<text class="uni-countdown__number">{{item.hour}}</text>
								<text class="uni-countdown__splitor">:</text>
								<text class="uni-countdown__number">{{item.minute}}</text>
								<text class="uni-countdown__splitor">:</text>
								<text class="uni-countdown__number">{{item.second}}</text>
							</view>
						</view>
					</view>

				</view>
			</swiper-item>
			<swiper-item class="scroll-view-height">
				<!-- 第一页的内容 -->
				<view class="goods-item" v-for="item in terminalList2">
					<view class="goods-name">{{item.terminalName}}</view>
					<view class="info">
						<image :src="item.imgUrl" class="cu-avatar xl " style="width: 200rpx; " mode="widthFix">
						</image>
						<view class="right">
							<view class="info-item">
								<view class="info-item-title">{{$t('shop.netIncome')}}：</view>
								<view class="info-item-number">{{item.amount}}</view>
							</view>
							<view class="info-item">
								<view class="info-item-title">{{$t('shop.computingPower')}}：</view>
								<view class="info-item-number color-b">{{item.power}}TH/s</view>
							</view>
							<view class="info-item">
								<view class="info-item-title">{{$t('shop.totalRevenue')}}：</view>
								<view class="info-item-number">{{item.totalAmount}}</view>
							</view>
							<view class="info-item">
								<view class="info-item-title">{{$t('shop.purchaseLimit')}}：</view>
								<view class="info-item-number color-b">{{item.allowNum}}</view>
							</view>
							<view class="info-item">
								<view class="info-item-title">{{$t('shop.validityPeriod')}}：</view>
								<view class="info-item-number color-b">{{item.leaseDay}}{{$t('shop.day')}}</view>
							</view>
						</view>
					</view>
					<view class="op">
						<view class="price">{{item.leasePrice}}{{item.coinFlag =='1'?" LMP":"$"}}</view>
						<button class="mini-btn buy-btn" type="primary" size="mini" v-if="item.status == '1'"
							@click="buy(item)">{{$t('shop.buy')}}</button>
						<button v-else class="mini-btn presale-btn" type="primary"
							size="mini">{{$t('shop.presale')}}</button>
					</view>
					<view class="sellingDown">
						<view class="action-box-right" v-show="item.countdownHour != null">
							<view class="action-box-right-start">
								<view>{{$t('shop.countdown')}}:</view>
							</view>
							<view class="uni-countdown">
								<text class="uni-countdown__number">{{item.hour}}</text>
								<text class="uni-countdown__splitor">:</text>
								<text class="uni-countdown__number">{{item.minute}}</text>
								<text class="uni-countdown__splitor">:</text>
								<text class="uni-countdown__number">{{item.second}}</text>
							</view>
						</view>
					</view>
				</view>
			</swiper-item>

		</swiper>
	</view>
</template>

<script>
	import {
		getTerminalInfoList,
		terminalType,
		subUserCount,
		buyApi
	} from "@/api/terminal/terminal_info.js"

	export default {

		data() {
			return {
				subUser: {
					"oneLevelNum": 0,
					"secondLevelNum": 0,
					"threeLevelNum": 0
				},

				//是否到底部，如果到了底部就不用查询了
				isBottom: false,
				//用与判断第二个标签页是否到底，只用来防止重复查询
				isBottom2: false,
				tabType: '',
				typeList: [],
				terminalPage: 0,
				terminalPage2: 0,
				pageSize: 10,
				terminalList: [],
				terminalList2: [],
				terminalImg: '',
				currentSwiper: 0,
				swiperHeight: '1000px',
				itemHeight: 227,
			}
		},
		onShow() {
			uni.setTabBarItem({
				index: 4,
				visible: false
			})
		},
		onLoad: function() {

			setInterval(this.setRunTime, 1000);

			this.terminalImg = this.$store.state.user.avatar;
			var $this = this;
			terminalType().then(response => {
				$this.typeList = response.data;
				$this.tabType = response.data[0].value;
				$this.getTerminalList("init");
			});
			subUserCount().then(rsp => {
				if (rsp && rsp.code == 200) {
					this.subUser.oneLevelNum = rsp.data.oneLevelNum;
					this.subUser.secondLevelNum = rsp.data.secondLevelNum;
					this.subUser.threeLevelNum = rsp.data.threeLevelNum;
				}
			});
			//第一次把这个也加上上
			getTerminalInfoList({
				'terminalType': '2',
				'pageNum': ++this.terminalPage2,
				'pageSize': this.pageSize,
			}).then(rsp => {
				if (rsp.code == 200) {
					this.terminalList2 = rsp.rows;
					this.calHeight(1);
					var currentNum = this.terminalPage2 * this.pageSize;
					if (currentNum >= rsp.total) {
						this.isBottom2 = true;
					}
				}
			});

			//获取item的高度
			var $this = this;
			uni.createSelectorQuery().select('.goods-item').boundingClientRect((res) => {
				$this.itemHeight = res.height + 10;
			}).exec();



		},
		onReachBottom: function() {
			//是否到底部，如果到了底部就不用查询了
			if (!this.isBottom) {
				this.getTerminalList();

			}
		},
		methods: {
			swipeIndex(current) {
				this.currentSwiper = current.detail.current;
				this.calHeight(current.detail.current);
				this.tabType = current.detail.current + 1;
			},
			calHeight(index) {

				var list = index == 0 ? this.terminalList : this.terminalList2;
				var num = 0;
				list.forEach(item => {
					if (item.countdownHour) {
						num++;
					}
				})
				console.log('num' + num)
				var height = 10 + list.length * this.itemHeight + num * 24 + 60 + "px";
				if (height != this.swiperHeight) {
					this.swiperHeight = height;
				}
			},
			setRunTime() {
				this.terminalList.forEach(item => {
					if (item.countdownHour == '' || item.expirationTime == '') {
						return;
					}
					var X = new Date(item.expirationTime);

					// 获取当前时间的 Date 对象
					const currentDate = new Date();
					// 设置时区为哥伦比亚时区
					const options = {
						timeZone: 'America/Bogota'
					};
					// 使用 toLocaleString 方法获取格式化的本地时间
					const colombiaTime = currentDate.toLocaleString('en-US', options);

					var Y = new Date(colombiaTime);
					if (X.getTime() <= Y) {
						item.hour = '00';
						item.minute = '00';
						item.second = '00';
						return;
					}

					var T = (X.getTime() - Y.getTime());

					var hour = this.zeroFill(Math.floor(T / (3600 * 1000))); //

					var leave2 = T % (3600 * 1000) //计算小时数后剩余的毫秒数
					var minutes = this.zeroFill(Math.floor(leave2 / (60 * 1000)));

					var leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数
					var seconds = this.zeroFill(Math.round(leave3 / 1000));

					item.hour = hour;
					item.minute = minutes;
					item.second = seconds;
				})

				this.terminalList2.forEach(item => {
					if (item.countdownHour == '' || item.expirationTime == '') {
						return;
					}
					var X = new Date(item.expirationTime);

					// 获取当前时间的 Date 对象
					const currentDate = new Date();
					// 设置时区为哥伦比亚时区
					const options = {
						timeZone: 'America/Bogota'
					};
					// 使用 toLocaleString 方法获取格式化的本地时间
					const colombiaTime = currentDate.toLocaleString('en-US', options);

					var Y = new Date(colombiaTime);
					if (X.getTime() <= Y) {
						item.hour = '00';
						item.minute = '00';
						item.second = '00';
						return;
					}

					var T = (X.getTime() - Y.getTime());

					var hour = this.zeroFill(Math.floor(T / (3600 * 1000))); //

					var leave2 = T % (3600 * 1000) //计算小时数后剩余的毫秒数
					var minutes = this.zeroFill(Math.floor(leave2 / (60 * 1000)));

					var leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数
					var seconds = this.zeroFill(Math.round(leave3 / 1000));

					item.hour = hour;
					item.minute = minutes;
					item.second = seconds;
				})

			},
			zeroFill(num) {
				num = '' + num
				if (num.length == 1) {
					num = '0' + num
				}
				return num
			},
			getTerminalList(isInit) {

				//第二次个tab查询的数据在初始化查询时就到底了
				if (this.currentSwiper == 1 && this.isBottom2) {
					return;
				}
				var terminalPage = this.currentSwiper == 0 ? ++this.terminalPage : ++this.terminalPage2;
				getTerminalInfoList({
					'terminalType': this.tabType,
					'pageNum': terminalPage,
					'pageSize': this.pageSize,
				}).then(rsp => {
					if (rsp && rsp.code == 200) {
						if (this.currentSwiper == 0) {
							this.terminalList = this.terminalList.concat(rsp.rows);
							this.calHeight(0);
							//this.swiperHeight = 10 + this.terminalList.length * 227 + "px";
						} else {
							this.terminalList2 = this.terminalList2.concat(rsp.rows);
							this.calHeight(1);
							//this.swiperHeight = 10 + this.terminalList2.length * 227 + "px";
						}

						var currentNum = terminalPage * this.pageSize;
						if (currentNum >= rsp.total) {
							//全部
							if ("init" != isInit) {
								uni.showToast({
									title: this.$t('shop.reachedBottom'),
									icon: 'none'
								})
							}
							this.isBottom = true;
						}
					}
				})
			},
			buy(item) {
				this.$tab.navigateTo('/pages/work/buy?terminalId=' + item.terminalId)

			},

			tabChange(item) {
				this.currentSwiper = item.index;
				this.calHeight(item.index);
				// //清空数据
				// this.terminalPage = 0;
				// this.terminalList = [];
				// this.isBottom = false;
				// //回到顶部
				this.tabType = item.value;
				// this.getTerminalList("init");

			},


		}
	}
</script>

<style lang="scss">
	page {
		background-color: $uni-color-bg;
		color: $uni-color-font;
	}

	.work-container {
		background-color: $uni-color-bg;
		width: 100%;
		height: 100%;

		.scroll-view-height {
			//height: calc(100vh - var(--status-bar-height) - 50px - 80px);
			height: calc(2370px + 160px);
		}

		.card {
			padding-bottom: 10px;
			margin: 0 10px;
			border-radius: 10px;
			height: 70px;
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			box-shadow: 0 3px 6px 1px rgba(0, 0, 0, .12);
			align-content: center;
			flex-wrap: nowrap;
			flex-direction: row;
			background-color: $uni-color-primary;


			.active-item {
				.number {
					color: $uni-color-box;
					text-align: center;
					margin-top: 5px;
					font-size: 24px;
					font-family: Black Ops One;
				}

				.cardtitle {
					color: $uni-color-box;
					font-size: 14px;
				}
			}
		}

		.goods-item {
			margin: 10px;
			background-color: $uni-color-box;

			box-shadow: 0 3px 6px 1px rgba(0, 0, 0, .12);
			border-radius: 10px;
			padding: 10px;
			position: relative;
			padding-bottom: 10px;


			.goods-name {
				height: 30px;
				line-height: 30px;
				padding-bottom: 10px;
				color: $uni-color-primary;
				display: flex;
				justify-content: center;
				align-items: flex-start;
				font-size: 28rpxpx;
				font-weight: 500;
				text-align: center;
				align-content: center;
				flex-wrap: nowrap;
				flex-direction: row;
				border-bottom: 1px solid black;
				font-family: UTM Than Chien Tranh;
			}

			.info {
				display: flex;
				padding-bottom: 4px;
				border-bottom: 1px solid black;
				justify-content: center;
				align-content: center;
				flex-wrap: nowrap;
				flex-direction: row;
				align-items: center;

				.right {
					flex: 1;
					margin-left: 10px;
					display: flex;
					flex-direction: column;
					justify-content: space-around;

					.info-item {
						display: flex;
						justify-content: space-between;
						font-size: 14px;
						align-content: center;
						flex-wrap: nowrap;
						flex-direction: row;
						align-items: center;

						.info-item-title {
							height: 25px;
							line-height: 25px;
							color: #9c9c9c;
						}

						.info-item-number {
							color: white;
							height: 25px;
							line-height: 25px;
							font-weight: 500;
						}

						.color-b {}
					}
				}
			}

			.op {
				height: 40px;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.price {
					color: $uni-color-primary;
					font-size: 18px;
					font-weight: 700;
					flex: 1;
				}


				.buy-btn {
					background-color: $uni-color-primary;
					border-radius: 15px;
					color: $uni-color-box;
				}

				.presale-btn {
					background-color: #9c9c9c;
					border-radius: 15px;
					color: $uni-color-box;
				}
			}

			.sellingDown {
				.action-box-right {
					margin-right: 10px;
					font-size: 18px;
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;

					.action-box-right-start {
						margin-right: 10px;
						color: $uni-color-primary;
						font-size: 15px;
					}

					.uni-countdown {
						display: flex;
						flex-direction: row;
						justify-content: flex-start;
						align-items: center;

						.uni-countdown__number {
							color: $uni-color-box;
							background-color: $uni-color-primary;
							font-size: 14px;
							width: 26px;
							line-height: 20px;
							border-radius: 3px;
							text-align: center;
						}

						.uni-countdown__splitor {
							color: rgb(51, 51, 51);
							font-size: 12px;
							margin: 4px;
						}
					}

				}
			}

		}



	}
</style>